<template>
  <div>
    <h3>父组件 -- {{ username }} -- {{ count }}</h3>
    <!-- <child :username="username" @setUsername="setUsername" /> -->
    <!-- 
      v-model 作用于自定义组件中   vue3
        + modelValue         属性
        + update:modelValue  事件
        + modelModifiers 自定义修饰符对象
     -->
    <!-- <child v-model="username" /> -->
    <!-- 
      vue3可以给自定义组件绑定多个v-model 但是你就必须要指定名称
      v-model:count
        + count
        + update:count
        + countModifiers
     -->
    <!-- <child v-model="username" v-model:count="count" /> -->
    <!-- 
      vue3还提供一个绑定在自定义组件时，自定义修饰符
     -->
    <child v-model.aaa="username" v-model:count.time="count" />
  </div>
</template>

<script>
import child from '@/components/child/index.vue'

export default {
  components: {
    child
  },
  data() {
    return {
      count: 100,
      username: 'admin'
    }
  },
  methods: {
    setUsername(name) {
      this.username = name
    }
  }
}
</script>

<style lang="scss" scoped></style>
